﻿@model TestsModel.Data.FillTest

@{
    ViewBag.TestId = Guid.NewGuid().ToString();
}

<link href="@Url.Content("~/Content/Shared/Editor Templates/FillTest.css")" rel="stylesheet" type="text/css"/>

<fieldset>
    <legend>Fill in the gaps with correct answers</legend>
    <div id="questionItem">
        <div id="fillTestTextBlock">
            @Html.Raw(@Model.Text.Replace("##__##", "<span class='textGap'>________</span>"))
            @Html.HiddenFor(model => model.Text, new { id = ViewBag.TestId + "fillTestText" })
        </div>
        <div id="fillTestGapsBlock">
            @foreach (var statement in Model.Statements)
            {
                <span class="fillTestGapBlockStatement k-button">
                    @Html.HiddenFor(x => statement.Key)
                    @statement.Value
                </span>
            }
        </div>
    </div>
</fieldset>


<script type="text/javascript">
    var testId = '@(ViewBag.TestId)';

    $(".fillTestGapBlockStatement").kendoDraggable({
        hint: function (element) {
            return element.clone();
        },
        group: "fillTestGroup"
    });
    $(".textGap").kendoDropTarget({
        dragenter: fillTestDropTargetOnDragEnter,
        dragleave: fillTestDropTargetOnDragLeave,
        drop: fillTestOnDrop,
        group: "fillTestGroup"
    });

    function fillTestOnDrop(e) {
        e.dropTarget.removeClass("textGapHighlighted");

        var dropTargetSpanIndex = -1;
        for (var i = 0; i < e.dropTarget[0].parentElement.children.length; i++) {
            if (e.dropTarget[0].parentElement.children[i] == e.dropTarget[0]) {
                dropTargetSpanIndex = i;
                break;
            }
        }
        if (dropTargetSpanIndex == -1)
            return false;

        var statementId = e.draggable.element[0].children[0].value;

        var fillTestTextElement = $("#" + testId + "fillTestText");
        var currentFillTestText = fillTestTextElement[0].value;
        var newFillTestText = currentFillTestText;
        var currentPos = 0;
        newFillTestText = newFillTestText.replace(/##_[0-9]*_##/g, function () {
            if (currentPos == dropTargetSpanIndex) {
                currentPos++;
                return "##_" + statementId + "_##";
            } else {
                currentPos++;
                return arguments[0];
            }
        });

        fillTestTextElement[0].value = newFillTestText;

        var draggableClone = e.draggable.element.clone();
        draggableClone.removeClass("fillTestGapBlockStatement");
        draggableClone.addClass("gapInText");

        e.dropTarget[0].innerHTML = draggableClone[0].outerHTML;

        return true;
    }
    function fillTestDropTargetOnDragEnter(e) {
        e.dropTarget.addClass("textGapHighlighted");
    }
    function fillTestDropTargetOnDragLeave(e) {
        e.dropTarget.removeClass("textGapHighlighted");
    }

    $(document).on('click', ".gapInText", function () {
        this.parentElement.innerHTML = "________";
    });
</script>
